<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import { departmentListApi } from "@/apis/consult"
  import type { DepartData } from "@/types/consult"
  import { ref } from "vue"
  import { useConsultStore } from "@/stores/consult"

  const props = defineProps<{ illnessType: string }>()
  const store = useConsultStore()
  store.setIllnessType(props.illnessType)
  // 1. 科室列表
  const departmentList = ref<DepartData[]>([])
  const activeIndex = ref(0)
  // 科室列表
  async function getDepartmentList() {
    // 科室列表接口
    const data = await departmentListApi()
    // 渲染列表数据
    departmentList.value = data
  }

  // 获取科室列表
  getDepartmentList()
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        v-for="(item, index) in departmentList"
        :key="item.id"
        class="department-item"
        :class="{ active: activeIndex === index }"
        @click="activeIndex = index"
        >{{ item.name }}</view
      >
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        v-for="item in departmentList[activeIndex]?.child"
        :key="item.id"
        hover-class="none"
        :url="`/subpkg_consult/description/index?depId=${item.id}`"
        class="department-item"
      >
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import "./index.scss";
</style>
